iT邦幫忙

2021 iThome 鐵人賽

DAY 22
0
Mobile Development

卡卡30天學 React Native系列 第 22

[ 卡卡 DAY 22 ] - React Native 元件害羞之骨架屏先讓你瞧 react-native-skeleton-placeholder

  • 分享至 

  • xImage
  •  

咦 大家有見網友的經驗嗎?
在還沒見面前是否都是以照片來判斷這個人是不是自己的菜?
網站也有一個時間是還沒 loading 好的時間差
今天來教大家做一個 shap 骨架屏,在你還沒與真正的元件見面的時候
先用照騙跟形狀住進他心中!直到與他相見 XD

今天要介紹的套件是 react-native-skeleton-placeholder

安裝

這個插件需要安裝 @react-native-masked-view/masked-view and react-native-linear-gradient

  1. 安裝 masked-view
npm install @react-native-masked-view/masked-view react-native-linear-gradient --save

cd ios
pod install
  1. 安裝 react-native-skeleton-placeholder
npm install react-native-skeleton-placeholder --save

cd ios
pod install

先建立一個 Placeholder.js 在 components/

import React from 'react';
import { View } from 'react-native';
import SkeletonPlaceholder from 'react-native-skeleton-placeholder';

const Placeholder = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <SkeletonPlaceholder>
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          <View style={{ width: 60, height: 60, borderRadius: 50 }} />
          <View style={{ marginLeft: 20 }}>
            <View style={{ width: 120, height: 20, borderRadius: 4 }} />
            <View
              style={{ marginTop: 6, width: 80, height: 20, borderRadius: 4 }}
            />
          </View>
        </View>
      </SkeletonPlaceholder>
    </View>
  );
};
export default Placeholder;

圖
我長這樣 ~~~

如何增加影子

import React from 'react';
import { View } from 'react-native';
import SkeletonPlaceholder from 'react-native-skeleton-placeholder';

const Placeholder = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <SkeletonPlaceholder>
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          <View style={{ width: 60, height: 60, borderRadius: 50 }} />
          <View style={{ marginLeft: 20 }}>
            <View style={{ width: 120, height: 20, borderRadius: 4 }} />
            <View
              style={{ marginTop: 6, width: 80, height: 20, borderRadius: 4 }}
            />
          </View>
        </View>
        // add--
        <View>
          <View
            style={{ marginTop: 6, width: 100, height: 30, borderRadius: 50 }}
          />
        </View>
        // --end
      </SkeletonPlaceholder>
    </View>
  );
};
export default Placeholder;

圖 2

就會多出現一條線拉!!

  1. 到需要骨架屏的頁面放入 Placeholder 判斷畫面是否讀畫面是否讀取好
import Placeholder from '@src/components/Placeholder'

const [ isloading, setLoading ]= useState(true)

// 在頁面讀取好資料後將使用 setLoading(false)
// 運用 isloading? 來判斷要是用畫面還是 Placeholder

今日結論

其實這個套件就是照著原本畫面刻出一個一樣的影子!再來判斷是否 loading 完成,簡簡單單的使用,就算是看不到本人也看得到背影~~~讓畫面不空白不突然展開 :P

Day22 done~ 請多多指教


上一篇
[ 卡卡 DAY 21 ] - React Native 資料手機存起來 AsyncStorage
下一篇
[ 卡卡 DAY 23 ] - React Native 表單套件用 Formik + Yup 驗證 (上)
系列文
卡卡30天學 React Native31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
yuri99999
iT邦新手 5 級 ‧ 2022-11-03 18:08:56

对我帮助很大,谢谢哦。
我反正是都是以照片來判斷這個人是不是自己的菜

我要留言

立即登入留言